<template>
	<view class="">
		<u-navbar :is-back="true" :custom-back="goBack" back-text="">
			<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
				<view style="display: flex; align-items: center; justify-content: space-between; width: 100%;}">
					<view class="search" :style="{ width: '100%' }">
						<u-search placeholder="请输入设备SN" shape="round" :show-action="false" @search="searchRepair"></u-search>
					</view>

					<view style="width:7rem;text-align: center;" @click="statusClick">
						<span style="padding: 0 0.5rem; color: #02af74">{{statusV}}</span>
						<span>
							<u-icon v-if="isStatus" name="arrow-up-fill" color="#02AF74" size="25" style="padding-right: 0.7rem"></u-icon>
							<u-icon v-else name="arrow-down-fill" color="#02AF74" size="25" style="padding-right: 0.7rem"></u-icon>
						</span>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="text">
			<view class="left">
				<view style="margin: 15px;">
					<text>报修中：</text>
					<text>{{extra.underRepairFeedbackCount}}</text>
				</view>
				<view>
					<text>未处理：</text>
					<text>{{extra.createFeedbackCount}}</text>
				</view>
			</view>
			<!-- 筛选弹窗 -->
			<u-popup v-model="isScreenShow" mode="right">
				<view style="padding: 30rpx 20rpx;">
					<view class="">
						设备类型
					</view>
					<view class="type">
						<text :class="typeVCode=='POWER_BANK'?'green':'white'" @click="typeCheck('POWER_BANK')">底座</text>
						<text :class="typeVCode=='CHARGER'?'green':'white'" @click="typeCheck('CHARGER')">充电线</text>
						<text :class="typeVCode=='PORTABLE_BATTERY'?'green':'white'" @click="typeCheck('PORTABLE_BATTERY')">充电宝</text>
					</view>
					
					<view class="">
						<view class="">
							选择时间
						</view>
						<view @click="selectTime('start')" class="timeBackground" style="margin: 20rpx 0 ;">{{startTime}}</view>
						<view @click="selectTime('end')" class="timeBackground" style="margin: 0 0 100rpx 0;">{{endTime}}</view>
					</view>
					<u-button @click="chooseSure" style="height: 65rpx;margin: 20rpx 0;" type="success">搜索</u-button>
					<u-button @click="chooseCancle" style="height: 65rpx;margin: 20rpx 0;" type="default">取消</u-button>
				</view>
			</u-popup>
			<view @click="screenClick" class="right">筛选</view>
		</view>
		<view class="title" style="color: #999;">
			<text>提交时间</text>
			<text>设备类型</text>
			<text>问题反馈</text>
			<text>状态</text>
		</view>
		<view v-for="(item,index) in dataList" :key="index" class="item" style="color: #999;">
			<view class="">
				<view>{{item.updateTime}}</view>
			</view>
			<view class="itemChild" style="color: #000000;">
				<view>{{getDeviceType(item.deviceType.desc)}}</view>
				<view style="margin-top: 3px;">SN:{{item.deviceSn}}</view>
			</view>
			<view class="itemChild">
				<view>{{item.content}}</view>
			</view>
			<text>{{getStatus(item.status)}}</text>
		</view>
		
		<uni-load-more  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="status" ></uni-load-more>
		<u-select v-model="isStatus" mode="mutil-column" :list="statusList" @confirm="statusChange"></u-select>
		<u-picker v-model="isTime" @confirm="timeConfirm" mode="time"></u-picker>

		<view class="footP">
			<view @click="addRepair" style="padding: 0.7rem;display: flex;align-items: center;">
				<image style="width: 1rem;height:1rem" src="../../style/image/cargo/add.jpg" alt="">
					<view style="color: white;margin-left: 0.2rem;">设备报修</view>
			</view>
		</view>

	</view>
</template>

<script lang="js">
	import uniLoadMore from '../loadMore/uni-load-more.vue';
	import {
		feedbackFind
	} from "../../utils/uniApi";
	import uPicker from "../../uview-ui/components/u-picker/u-picker.vue";
	export default {
		components:{
			 'uniLoadMore':uniLoadMore
		},
		data() {
			return {
				keyWord: "",
				pageNum: 1, //
				isStatus: false, //状态选择
				statusV: '全部',
				statusVCode: '', //状态code
				statusList: [
					[{
						value: '',
						label: '全部'
					}, {
						value: 'STATE_ING',
						label: '待处理'
					}, {
						value: 'STATE_SUCCESS',
						label: '已处理'
					}, {
						value: 'UNDER_REPAIR',
						label: '报修中'
					}, {
						value: 'NODE',
						label: '已完成'
					}, ]
				],
				isScreenShow: false, //筛选 选择
				typeVCode: '', //设备类型（CHARGER -> 充电线； POWER_BANK -> 底座； PORTABLE_BATTERY -> 充电宝）
				isTime: false, //选择时间弹窗
				timeValue: '', //选择时间弹窗类型   start：开始时间    end：结束时间
				startTime: '开始时间', //
				startTimeStamp: '', //
				endTime: '结束时间', //
				endTimeStamp: '', //
				dataList: [],//原数据list
				extra:{},//原数据 附加字典数据
				
				
				status:'more',//刷新加载更多状态
				contentText:{
					contentdown: '下拉或点击查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				continueTypes:true,////刷新加载更多状态
			}
		},
		onHide(){
			uni.hideLoading();
		},
		//下拉刷新
		onPullDownRefresh() {
		    setTimeout(function () {
		      uni.redirectTo({
		        url: "../../pages/equipment/repairService",
		      });
		      uni.stopPullDownRefresh();
		    }, 1000);
		},
		//上拉加载更多
		onReachBottom() {
			if(!this.continueTypes){
				return
			}
		    this.pageNum = this.pageNum + 1;
		    this.getFeedbackFind(this.pageNum, this.statusVCode, this.typeVCode, this.keyWord)
		},
		clickLoadMore(){
			this.onReachBottom()
		},
		onLoad() {
			
		},
		onShow() {
			this.getFeedbackFind(this.pageNum, this.statusVCode, this.typeVCode, this.keyWord)
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//搜索
			searchRepair(key) {
				this.keyWord = key
				this.pageNum = 1
				this.getFeedbackFind(this.pageNum, this.statusVCode, this.typeVCode, this.keyWord)
			},
			//状态选择
			statusClick() {
				this.isStatus = !this.isStatus
			},
			//状态选择确认按钮
			statusChange(data) {
				this.isStatus = !this.isStatus
				this.statusV = data[0].label
				this.statusVCode = data[0].value
				this.pageNum = 1
				this.getFeedbackFind(this.pageNum, this.statusVCode, this.typeVCode, this.keyWord)
			},
			typeCheck(value) {
				this.typeVCode = value
			},
			//筛选 选择
			screenClick() {
				this.isScreenShow = !this.isScreenShow
			},
			//筛选 取消
			chooseCancle() {
				this.isScreenShow = !this.isScreenShow
			},
			//筛选 确认
			chooseSure() {
				this.isScreenShow = !this.isScreenShow
				this.pageNum = 1
				this.getFeedbackFind(this.pageNum, this.statusVCode, this.typeVCode, this.keyWord)
			},
			//选择时间的弹窗
			selectTime(value) {
				this.timeValue = value
				this.isTime = !this.isTime
			},
			//选择时间的确认按钮
			timeConfirm(data) {
				var timeS = data.year + '-' + data.month + '-' + data.day
				var timestamp = new Date(timeS).getTime()
				if (this.timeValue == 'start') {
					this.startTimeStamp = timestamp
					this.startTime = timeS
				} else if (this.timeValue == 'end') {
					this.endTimeStamp = timestamp
					this.endTime = timeS
				}
			},
			//状态转换
			getStatus(value) {
				if (value == 'STATE_ING') {
					return '待处理'
				} else if (value == 'STATE_SUCCESS') {
					return '已处理'
				} else if (value == 'UNDER_REPAIR') {
					return '报修中'
				} else if (value == 'DONE') {
					return '已完成'
				}
			},
			//获取设备报修列表数据
			getFeedbackFind(page, status, type, key) {
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					deviceType: type, //设备类型 设备类型（CHARGER -> 充电线； POWER_BANK -> 底座； PORTABLE_BATTERY -> 充电宝）
					status: status, //跟进状态（STATE_ING -> 待处理； STATE_SUCCESS -> 已处理； UNDER_REPAIR -> 报修中； DONE -> 已完成）
					page: page,
					size: "10",
					primaryKey: key, //搜索关键字  (设备sn/订单编号)
					beginTime: this.startTimeStamp, //起始时间，时间戳(13位)
					endTime: this.endTimeStamp, //结束时间，时间戳(13位)
				};
				feedbackFind(params).then((res) => {
					// console.log("输出设备报修值："+JSON.stringify(res.data))
					uni.hideLoading();
					if (res.data.statusCode == 200) {
						this.extra = res.data.result.extra
						if (res.data.result.pages > res.data.result.current) {
						  this.status = "more";
						  this.continueTypes = true;
						} else {
						  this.status = "noMore";
						  this.continueTypes = false;
						}
						if (this.dataList.length > 0 && page == 1) { //搜索时清除已有数据  如果有分页 需在考虑
							this.dataList = [];
						}
						res.data.result.records.filter((item, index) => {
							this.dataList.push(item);
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}

				});
			},
			addRepair() {
				uni.navigateTo({
					url: "./repair",
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F3F5F7;
	}

	.shaixuanBtn {
		width: 140rpx;
		height: 60rpx;
		margin: 10rpx 0;
		color: #cbcbcb;
	}

	.type {
		display: flex;
		flex-direction: column;

		text {
			margin: 4px 0;
			padding: 5px 15px;
			border: 1px solid #dadada;
			color: #dadada;
			width: 80px;
			text-align: center;
			border-radius: 10rpx;
		}
	}

	.timeBackground {
		background-color: #f6f6f6;
		width: 280rpx;
		text-align: center;
		padding: 10rpx;
		color: #cbcbcb;
		border-radius: 10rpx;
	}

	.footP {
		position: absolute;
		bottom: 0;
		background-color: #02af74;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.right {
			display: flex;
			background-color: #fff;
			width: 65px;
			height: 30px;
			justify-content: center;
			align-items: center;
			border-radius: 50px;
			color: #02AF74;
			margin-right: 10px;
		}
	}

	.green {
		background-color: #02AF74 !important;
		color: #fff !important;
	}

	.white {
		background-color: #fff;
		color: #000;
	}

	.title,
	.item {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		padding: 1em 0;
		margin: 0 10px 5px;
		border-radius: 10px;

		.itemChild {
			align-items: center;
			justify-content: center;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			word-wrap: break-word;
			word-break: break-all;
			text-align: center;
			width: 6em;
		}
	}
</style>
